<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			* {
				box-sizing: border-box;
				font-size: 12px;
				color: #d0d562;
			}

			html,
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}

			.container {
				width: 100%;
				height: 100%;
				background: url(img/textures/background.jpg) no-repeat;
				background-size: 100% 100%;
			}

			.column-box {
				display: -webkit-flex;
				/* Safari */
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.row-box {
				display: -webkit-flex;
				/* Safari */
				display: flex;
				flex-direction: row;
			}

			.top {
				width: 100%;
				margin: 0;
				padding: 0;
			}

			.row {
				height: 40px;
			}

			.first-item {
				background-repeat: no-repeat;
				height: 100%;
				width: 33.3%;
				margin-left: 10px;
				margin-top: 10px;
			}

			.second-item {
				background-repeat: no-repeat;
				height: 100%;
				width: 50%;
				margin-left: 10px;
				margin-top: 10px;
				display: inline-flex;
			}

			.second-item div {
				display: inline-flex;
				width: 100%;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 3px 5px;
			}

			.second-item span {
				font-size: 10px;
			}

			.item_bg_status {
				background-image: url(img/textures/bg_status.png);
				background-size: 100% 100%;
			}

			.item_bg_timer {
				background-image: url(img/textures/bg_timer.png);
				background-size: 100% 100%;
			}

			.icon {
				display: inline-block;
				margin-top: -5px;
				margin-left: -10px;
				background-repeat: no-repeat;
				text-align: center;
				padding-top: 13px;
				width: 45px;
				height: 40px;
				color: white;
			}

			.icon_rank {
				background-image: url(img/textures/icon_rank.png);
				background-size: 100% 100%;
			}

			.icon_diamond {
				background-image: url(img/textures/icon_diamond.png);
				background-size: 100% 100%;
			}

			.icon_gold {
				background-image: url(img/textures/icon_gold.png);
				background-size: 100% 100%;
			}

			.icon_fight {
				background-image: url(img/textures/icon_fight.png);
				background-size: 100% 100%;
				margin-top: 1px;
			}

			.icon_energy {
				background-image: url(img/textures/icon_energy.png);
				background-size: 100% 100%;
				margin-top: 1px;
			}

			.bottom {
				width: 100%;
			}

			.main {
				background-image: url(img/textures/bg_main_btns.png);
				background-size: 100% 100%;
				height: 80px;
				margin: 0px 3px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20px;
				transform-origin:50% 50%;
				transition:transform 2s;
			}

			.sub {
				background-image: url(img/textures/bg_sub_btns.png);
				background-size: 100% 100%;
				height: 80px;
				margin: 0px 10px;
				margin-bottom: -15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40px;
				transition:transform 2s;
				transform-style:preserver-3d;
			}

			.sub_item {
				height: 36px;
				width: 45px;
				display: inline-flex;
				align-items: flex-end;
				justify-content: center;
			}

			.sub_beibao {
				background-image: url(img/textures/home_btns/btn_backpack.png);
				background-size: 100% 100%;
			}

			.sub_rongyu {
				background-image: url(img/textures/home_btns/btn_rongyu.png);
				background-size: 100% 100%;
			}

			.sub_liuyan {
				background-image: url(img/textures/home_btns/btn_liuyan.png);
				background-size: 100% 100%;
			}

			.sub_renwu {
				background-image: url(img/textures/home_btns/btn_renwu.png);
				background-size: 100% 100%;
			}

			.sub_chuzhan {
				background-image: url(img/textures/home_btns/btn_chuzhan.png);
				background-size: 100% 100%;
			}

			.sub_hecheng {
				background-image: url(img/textures/home_btns/btn_hecheng.png);
				background-size: 100% 100%;
			}

			.fold {
				display: inline-block;
				position: relative;
				bottom: -15px;
				left: 50%;
				z-index: 99;
				text-align: center;
				background-image: url(img/textures/btn_expand_slot.png);
				background-size: 100% 100%;
				padding: 5px;
				width: 70px;
				height: 20px;
				transform: translateX(-50%);
				transform-origin:50% 50%;
				transition:transform 2s;
			}
			
			.fold_up2down {
				transform: translate(-50%, 60px) rotate(180deg);
			}
			
			.fold_down2up {
				transform: translate(-50%, 0px) rotate(0deg);
			}
			
			.sub_up2down {
				transform: translate(0px, 60px);
			}
			
			.sub_down2up {
				transform: translate(0px, 0px);
			}
			
			.main_up2down {
				transform: translate(0px, 0px);
			}
			
		</style>
	</head>
	<body>
		<div class="container column-box">
			<div class="top">
				<div class="row row-box">
					<div class="first-item item_bg_status">
						<span class="icon icon_rank">99</span>
						<span>卢克断手者</span>
					</div>
					<div class="first-item item_bg_status">
						<span class="icon icon_diamond">&nbsp;</span>
						<span>668899</span>
					</div>
					<div class="first-item item_bg_status">
						<span class="icon icon_gold">&nbsp;</span>
						<span>668899</span>
					</div>
				</div>
				<div class="row row-box">
					<div class="second-item item_bg_timer">
						<span class="icon icon_fight">&nbsp;</span>
						<div>
							<span>剩余时间 0:08</span>
							<span style="justify-self: flex-end;">57/120</span>
							<img src="img/textures/timer_slot.png" width="100%" height="7">
							<img style="margin-top: -11px; margin-left: 2px;" src="img/textures/timer_bar.png" width="100" height="5">
						</div>
					</div>
					<div class="second-item item_bg_timer">
						<span class="icon icon_energy">&nbsp;</span>
						<div>
							<span>剩余时间 0:08</span>
							<span style="justify-self: flex-end;">57/120</span>
							<img src="img/textures/timer_slot.png" width="100%" height="7">
							<img style="margin-top: -11px; margin-left: 2px;" src="img/textures/timer_bar.png" width="100" height="5">
						</div>
					</div>
				</div>
				<div class="row row-box">
					<img style="margin-top: 10px;" src="img/textures/btn_message.png" width="45" height="40">
				</div>
			</div>

			<div class="bottom">
				<div class="fold">
					<img src="img/textures/btn_fold.png" width="49" height="15">
				</div>
				<div class="sub">
					<div class="sub_item sub_beibao">
						<img src="img/textures/txt_beibao.png" width="28" height="18">
					</div>
					<div class="sub_item sub_rongyu">
						<img src="img/textures/txt_rongyu.png" width="28" height="18">
					</div>
					<div class="sub_item sub_liuyan">
						<img src="img/textures/txt_liuyan.png" width="28" height="18">
					</div>
					<div class="sub_item sub_renwu">
						<img src="img/textures/txt_renwu.png" width="28" height="18">
					</div>
					<div class="sub_item sub_chuzhan">
						<img src="img/textures/txt_chuzhan.png" width="28" height="18">
					</div>
					<div class="sub_item sub_hecheng">
						<img src="img/textures/txt_hecheng.png" width="28" height="18">
					</div>
				</div>
				<div class="main">
					<img src="img/textures/home_btns/btn_home.png" width="42" height="55" />
					<img src="img/textures/home_btns/btn_level.png" width="42" height="55" />
					<img src="img/textures/home_btns/btn_raid.png" width="42" height="55" />
					<img src="img/textures/home_btns/btn_shop.png" width="42" height="55" />
					<img src="img/textures/home_btns/btn_friends.png" width="42" height="55" />
					<img src="img/textures/home_btns/btn_setting.png" width="42" height="55" />
				</div>
			</div>
		</div>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				let isDown = false;
				$(".fold").click(function() {
					console.log(isDown);
					//演示attr和addClass对样式的区别
					if(!isDown) {
						$(this).attr("class", "fold fold_up2down");
						$(".sub").attr("class", "sub sub_up2down");
						$(".main").attr("class", "main main_up2down");
					}else {
						$(this).addClass("fold_down2up");
						$(".sub").addClass("sub_down2up");
					}
					isDown = !isDown;
				});
			});
		</script>
	</body>
</html>
